<template>
  <div class="sub-column">
    <ul>
      <li v-for="goodItem in goodList.slice(0, 2)" :key="goodItem.id">
        <div class="sub-column-row">
          <div style="display: flex">
            <div>
              <img :src="emptyImg" width="60px" height="60px" />
            </div>
            <div style="margin-left: 5px">
              <div>
                <a-tooltip :title="goodItem.goodsName">
                  <div class="goods-name">
                    <a>{{ goodItem.goodsName }}</a>
                  </div>
                </a-tooltip>
              </div>
              <div>
                SKU:<span v-if="goodItem.sku">
                  {{ goodItem.sku }} &nbsp;&nbsp;
                  <a id="tag-copy" @click="copyHandle(goodItem.sku)" style="margin: 0 15px 0 5px">copy</a></span
                >
                &nbsp;&nbsp;
                <span v-else style="color: #d9001b">无</span>
                数量:{{ goodItem.quantity }}
              </div>
              <div>促销码:{{ goodItem.promotionIds }}</div>
            </div>
          </div>
          <div>ASIN:{{ goodItem.asin }}</div>
        </div>
        <div class="sub-column-row-right">
          <div>
            <div>{{ goodItem.currencyCode }}</div>
            <div>{{ goodItem.shippingPrice }}</div>
          </div>
        </div>
      </li>
      <template v-if="toggleSearchStatus">
      <li v-for="goodItem in goodList.slice(2)" :key="goodItem.id">
        <div class="sub-column-row">
          <div style="display: flex">
            <div>
              <img :src="emptyImg" width="60px" height="60px" />
            </div>
            <div style="margin-left: 5px">
              <div>
                <a-tooltip :title="goodItem.goodsName">
                  <div class="goods-name">
                    <a>{{ goodItem.goodsName }}</a>
                  </div>
                </a-tooltip>
              </div>
              <div>
                SKU:<span v-if="goodItem.sku">
                  {{ goodItem.sku }} &nbsp;&nbsp;
                  <a id="tag-copy" @click="copyHandle(goodItem.sku)" style="margin: 0 15px 0 5px">copy</a></span>
                &nbsp;&nbsp;
                <span v-else style="color: #d9001b">无</span>
                数量:{{ goodItem.quantity }}
              </div>
              <div>促销码:{{ goodItem.promotionIds }}</div>
            </div>
          </div>
          <div>ASIN:{{ goodItem.asin }}</div>
        </div>
        <div class="sub-column-row-right">
          <div>
            <div>{{ goodItem.currencyCode }}</div>
            <div>{{ goodItem.shippingPrice }}</div>
          </div>
        </div>
      </li>
    </template>
    </ul>
    <div class="expand" v-if="goodList.length >2 && !toggleSearchStatus"><a @click="toggleSearchStatusClick()"><b>展开其余{{goodList.length - 2}}个商品信息</b></a></div> 
  </div>
</template>
  <script>
export default {
  name: 'goodList', //商品列表
  props: {
    goodData: {
      type: Array,
      default: () => [],
    },
    toggleStatus:{
        type:Boolean,
        default:false
    }
  },
  data() {
    return {
      emptyImg: require('@/assets/oms/emptyImg.png'),
    }
  },
  computed: {
    goodList() {
      return this.goodData
    },
    toggleSearchStatus(){
      return this.toggleStatus
    },
  },
  methods:{
    toggleSearchStatusClick(){
        this.toggleSearchStatus = true
        this.$emit('toggleClick')
    },
  },
}
</script>
  <style lang="less" scoped>
.goods-name {
  width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}


/* 每一列的基础样式 */
.column {
  border-right: 1px solid #e8e8e8;
  box-sizing: border-box;
}

/* 第一列：内部再分为两列 */
.column-1 {
  display: flex;
  width: 680px;

  /* 第一列总宽度 */
  .sub-column {
    width: 680px;
    text-align: left;
    position: relative;
    .sub-column-row {
      display: flex;
      justify-content: space-between;
      width: 600px;
      padding: 10px 5px;
    }
    .expand {
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 10%;
    }
    .sub-column-row-right {
      width: 80px;
      height: 100%;
      text-align: center;
      padding: 5px;
      border-left: 1px solid #e8e8e8;
      display: table;

      & > div:first-child {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

li {
  display: flex;
  flex: 1;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

</style>